<template>
  <div>
    <el-form ref="userInfo" :model="userInfo" style="margin-right: 80px">
      <el-form-item label="">
        <el-input v-model="userInfo.communityname" placeholder="小区名称" style="width: 200px; margin-right: 10px"></el-input>
        <el-input v-model="userInfo.unitname" placeholder="单元名称" style="width: 200px; margin-right: 10px"></el-input>
        <span class="demonstration"></span>
        <el-date-picker v-model="userInfo.createDt" type="date" placeholder="建设日期"
          style="width: 200px; margin-right: 10px">
        </el-date-picker>
        <el-select v-model="userInfo.value" placeholder="选择状态  111223434" style="width: 200px; margin-right: 10px">
          <el-option label="已建成" :value="1"></el-option>
          <el-option label="未建成" :value="2"></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="handleFilter"></el-button>
        <el-button type="success" icon="el-icon-plus" @click="Hired">
          录入</el-button>
        <el-button type="primary" icon="el-icon-refresh-right" @click="Reset">
          重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border style="width: 100%" text-align="center"
      :header-cell-style="{ 'background-color': '#eee', color: '#000' }">
      <el-table-column prop="communityname" label="小区名称" width="180">
      </el-table-column>
      <el-table-column prop="unitname" label="单元名称" width="180">
      </el-table-column>
      <el-table-column prop="unitnum" label="栋数"> </el-table-column>
      <el-table-column prop="createtime" label="建设时间">
        <template slot-scope="scope">
          {{ scope.row.createtime.split("T")[0] }}
          <!-- {{ scope.row.createtime.split('.')[0] }} -->
        </template>
      </el-table-column>
      <el-table-column prop="unitstatus" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.unitstatus == 1">已建成</span>
          <span v-if="scope.row.unitstatus == 2">未建成</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" plain @click="handelDetail(scope.row)">详情</el-button>
          <el-button type="danger" plain @click="handelDelete(scope.row)">归档</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 使用分页 -->
    <Pagination :total="total" @SizeChange="changeCount" @CurrentChange="changePage">
    </Pagination>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination/Pagination.vue";
export default {
  components: { Pagination },
  data() {
    return {
      value1: "",
      input: "",
      tableData: [],
      stripe: true,
      total: 0,
      userInfo: {
        pageNum: 10,
        currPage: 0,
        unitname: "",
        communityname: "",
        createDt: "",
        value: "",

        // unitstatus: "",
      },
      // form: {
      //   name: "",
      //   region: "",
      //   date1: "",
      //   date2: "",
      //   delivery: false,
      //   type: [],
      //   resource: "",
      //   desc: "",
      // },
    };
    shortcuts: [
      {
        text: "今天",
        onClick(picker) {
          picker.$emit("pick", new Date());
        },
      },
      {
        text: "昨天",
        onClick(picker) {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24);
          picker.$emit("pick", date);
        },
      },
      {
        text: "一周前",
        onClick(picker) {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit("pick", date);
        },
      },
    ];
  },
  methods: {
    // 渲染页面
    GetAdd() {
      this.$axiosToken({
        url: "/house/gethouseList",
        method: "get",
        data: this.userInfo,
        success: (res) => {
          this.tableData = res.data;
          this.total = res.total;
        },
      });
    },
    // 查找接口
    GetFind() {
      this.$axiosToken({
        url: "/house/searchList",
        method: "get",
        data: this.userInfo,
        success: (res) => {
          this.tableData = res.data;
          this.total = res.total;
        },
      });
    },
    // 查找
    handleFilter() {
      this.userInfo.currPage = 1;
      console.log(this.userInfo);
      this.GetFind();
    },
    //分页
    changeCount(val) {
      this.pageNum = val;
    },
    changePage(val) {
      this.currPage = val;
      this.created();
    },
    // 跳转录入
    Hired() {
      console.log(1111);
      this.$router.push({
        path: "/house/add",
        query: {
          title: "新增单元",
        },
      });
    },
    // 重置
    Reset() {
      (this.userInfo = {
        pageNum: 10,
        currPage: 0,
        unitname: "",
        communityname: "",
        createDt: "",
        value: "",

        // unitstatus: "",
      }),
        this.GetAdd();
    },
    // 详情
    handelDetail(res) {
      this.$router.push({
        path: "/house/detail",
        query: { value: res },
      });
    },

    // 归档
    handelDelete(row) {
      this.$confirm("确认删除该单元信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.Delete(row.id);
        this.GetAdd();
      });
      // .catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消删除'
      //   });
      // });
    },
    // 归档接口
    Delete(row) {
      this.$axiosToken({
        url: "/house/delunitList",
        method: "get",
        data: {
          id: row,
        },
        success: (res) => {
          // console.log(res);
          this.$message({
            type: "success",
            message: "删除单元信息成功!",
          });
        },
      });
    },
  },

  created() {
    this.GetAdd();
    this.Delete();
  },
};
</script>
<style lang="scss" scoped>
//表头居中
::v-deep.el-table {
  th.el-table__cell>.cell {
    text-align: center;
  }
}

// 数据居中
::v-deep.el-table--enable-row-transition {
  .el-table__body td.el-table__cell {
    text-align: center;
  }
}

.el-button--primary.is-plain {
  background: none;
  border-color: #ccc;
  color: #409eff;
}

::v-deep.el-button--primary.is-plain:hover {
  border-color: #409eff;
  color: #409eff;
}

:v-deep.el-input--small {
  .el-input__inner {
    width: 200px;
    display: inline;
  }
}

v-deep.el-form-item__content {
  .el-input--small {
    margin-right: 10px;
  }
}
</style>